<!doctype html>
<html lang="en">

<%@ include file="Include_Professor_Imports.jsp"%>

    
    
<body>
<!-- HEADER -->
<div style="position: fixed; width: 100%; z-index: 1;">
<%@ include file="Include_Professor_Header.jsp"%>

<section id="secondary_bar">
<div class="user">
</div>
<div class="breadcrumbs_container"><article class="breadcrumbs"><a
	class="current">Home</a></article></div>
</section>
<!-- end of secondary bar -->

</div>

<%@ include file="Include_Professor_Menu.jsp"%>

<c:set var="studentCount" value="${requestScope.studentCount}"></c:set>
<c:set var="questionCount" value="${requestScope.questionCount}" ></c:set>
<c:set var="averages" value="${requestScope.averages}" ></c:set>
<c:set var="realExams" value="${requestScope.realExams}"></c:set>
<c:set var="practiceExams" value="${requestScope.practiceExams}"></c:set>
<c:set var="recentRealExams" value="${requestScope.recentRealExams}" ></c:set>
<c:set var="recentPracticeExams" value="${requestScope.recentPracticeExams}" ></c:set>


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Exam', 'Avg Grade']
          <c:forEach items="${realExams}" var="exam" varStatus="i">
          ,['<c:out value='${exam.examID}'></c:out>',  <c:out value='${averages[i.index]}'></c:out>]
			</c:forEach>
        ]);

        var options = {
          title: 'Students Performance'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>

<section id="main" class="column">

<%@ include file="Include_Professor_Message.jsp"%>

<article class="module width_full">
<header>
<h3>Stats</h3>
</header>
<div class="module_content"><article class="stats_graph">
<div id="chart_div" style="width: 700px; height: 100%;"></div> </article> <article class="stats_overview">
<div class="overview_today">
		<p class="overview_day">Exams</p>
		<p class="overview_count"><c:out value="${realExams.size()}"></c:out></p>
		<p class="overview_type">Live</p>
		<p class="overview_count"><c:out value="${practiceExams.size()}"></c:out></p>
		<p class="overview_type">Practice</p>
	</div>
	<div class="overview_previous">
		<p class="overview_day">Others</p>
		<p class="overview_count">${studentCount}</p>
		<p class="overview_type">Examinees</p>
		<p class="overview_count">${questionCount}</p>
		<p class="overview_type">Questions</p>
	</div>
</article>
<div class="clear"></div>
</div>
</article>
<!-- end of stats article -->

<article class="module width_3_quarter">
<header>
<h3 class="tabs_involved">Content Manager</h3>
<ul class="tabs">
	<li><a href="#tab1">Live</a></li>
	<li><a href="#tab2">Practice</a></li>
</ul>
</header>

<div class="tab_container">
<div id="tab1" class="tab_content">
<table class="tablesorter" cellspacing="0">
	<thead>
				<tr>
					<th>Exam ID</th>
					<th>Exam Name</th>
					<th># of Items</th>
					<th>Duration</th>
					<th>Passing</th>
					<th>Categories</th>
					<th>Status</th>
				</tr>
			</thead>
			<tbody>
			
				<c:forEach items="${realExams}" var="exam" varStatus="i">
			
					<tr onclick="multiplehighlight_8(this, objinput0, examsRow)">
						<td><c:out value="${exam.examID }"/></td>
						<td><c:out value="${exam.examName }"/> </td>
						<td><c:out value="${exam.questions.size() }"/> </td>
						<td><c:out value="${exam.duration }"/></td>
						<td><c:out value="${exam.passingPercent }"/></td>
						<td>
							<c:forEach items="${categories[i.index]}" var="category" varStatus="j" >
							
								<c:choose>
									<c:when test="${categories[i.index].size() eq j.count}">
										<c:out value="${ category }" />
									</c:when>
									<c:otherwise>
										<c:out value="${category}," />
									</c:otherwise>
								</c:choose>
					
							</c:forEach>
						</td>
						<td>
							<c:choose>
								<c:when test="${exam.activated}">
									<a style="visibility: hidden;">A</a><input type="image" value="a" src="${pageContext.request.contextPath}/images/icn_alert_success.png" title="Activated" style="border-style: none">
								</c:when>
								<c:otherwise>
									<a style="visibility: hidden;">D</a><input type="image" value="b" src="${pageContext.request.contextPath}/images/icn_security.png" title="Locked" style="border-style: none">
								</c:otherwise>
							</c:choose>
						</td>
					</tr>	
				</c:forEach>
			
			</tbody>
</table>
</div>
<!-- end of #tab1 -->

<div id="tab2" class="tab_content">
<table class="tablesorter" cellspacing="0">
	<thead>
		<tr>
			<th>Exam ID</th>
			<th>Exam Name</th>
			<th># of Items</th>
			<th>Categories</th>
		</tr>
	</thead>
	<tbody>
	
		<c:forEach items="${practiceExams}" var="exam" varStatus="i">
	
			<tr>
				<td><c:out value="${exam.examID }"/></td>
				<td><c:out value="${exam.examName }"/> </td>
				<td><c:out value="${exam.questions.size() }"/> </td>
				<td>
					<c:forEach items="${categories[i.index]}" var="category" varStatus="j" >
					
						<c:choose>
							<c:when test="${categories[i.index].size() eq j.count}">
								<c:out value="${ category }" />
							</c:when>
							<c:otherwise>
								<c:out value="${category}," />
							</c:otherwise>
						</c:choose>
			
					</c:forEach>
				</td>
			</tr>	
		
		</c:forEach>
	
	</tbody>
</table>

</div>
<!-- end of #tab2 --></div>
<!-- end of .tab_container -->

</article>
<!-- end of content manager article -->

<article class="module width_quarter">
<header>
<h3>Messages</h3>
</header>
<div class="message_list">
<div class="module_content">

<c:forEach items="${sessionScope.messages}" var="messageLog">
<div class="message">

	<p><c:out value="${messageLog.msg}"></c:out></p>
	<p><strong><c:out value="${messageLog.msgType}"></c:out></strong></p>

</div>
</c:forEach>

</div>
</div>

</article>
<!-- end of messages article -->

</section>


</body>

</html>